<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <div class="brokers" v-if="module.data.styleName == 0" v-cloak>
            <broker-item style="flex-shrink: 0" :broker="broker" v-for="(broker, i) in brokers" :key="i"/>
        </div>

        <div class="broker-cells" v-else v-cloak>
            <broker-cell style="flex-shrink: 0" :broker="broker" v-for="(broker, i) in brokers" :key="i"/>
        </div>

        <div class="empty" v-if="brokers.length == 0">
            没有查询到置业顾问数据,请调整筛选条件
        </div>


    </div>
</template>

<script>
import { getBrokerList } from "@/api/weapp";
import { mapGetters } from "vuex";
import BrokerItem from "./BrokerItem";
import BrokerCell from "./BrokerCell.vue";
export default {
    components: {
        BrokerCell,
        BrokerItem,
    },
    data () {
        return {
            brokers: [],
            loading: false,
        };
    },

    watch: {
        "module.data": {
            immediate: true,
            deep: true,
            handler (v) {
                this.brokers = [];
                this.loadBrokers();
            },
        },
        "module.items": {
            immediate: true,
            deep: true,
            handler (v) {
                this.brokers = [];
                this.loadBrokers();
            },
        },
    },
    props: {
        module: { type: Object, default: null },
    },

    mounted: function () {
        this.loadBrokers();
    },

    computed: {},

    methods: {
        loadBrokers: function () {
            var query = {};
            if (this.module.data.dataFrom === "ids") {
                // if (this.module.data.ids) {
                //     query.ids = this.module.data.ids.join(",");
                // } else {
                //     query.ids = this.module.ids.join(",");
                // }
                query.ids = this.module.items.join(",");
            } else {
                query = this.module.data.filter;
            }
            query.per_page = query.limit;
            getBrokerList(query).then((resp) => {
                this.brokers = resp.data.result;
            });
        },
    },
};
</script>

<style scoped>
.brokers {
    width: 100%;
    overflow: hidden;
    margin: 0 auto 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
}

.empty {
    text-align: center;
    height: 200px;
    line-height: 200px;
    color: #888;
}
</style>